<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书回收</title>
<!--    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}" />-->
    <link rel="stylesheet" th:href="@{/css/site.css}" />
    <link rel="stylesheet" th:href="@{/css/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/css/element.css}" />
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
</head>
<body>
<div th:replace="~{/commons/Header :: header}"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>回收书籍</legend>
</fieldset>
<div style="width: 550px;height: 600px;margin: auto">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">书籍名称</label>
            <div class="layui-input-block">
                <input type="text" name="bookName"  placeholder="请输入" autocomplete="off"  class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书籍作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" lay-verify="required" lay-reqtext="没有电话怎么联系，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required" lay-reqtext="没有电话怎么联系，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

       <div class="layui-form-item">
            <label class="layui-form-label">取件地址</label>
            <div class="layui-input-inline">
                <select name="college" lay-filter="college" >
                    <option value="0">请选择学院</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="major" lay-filter="major">
                    <option value="">请选择专业</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">地址详情</label>
            <div class="layui-input-block">
                <textarea name="details" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-normal" lay-submit="" lay-filter="demo1" style="color: white">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div th:replace="~{/commons/Header :: footer}"></div>

<script th:src="@{/js/jquery-3.6.0.js}" ></script>
<script th:src="@{/css/layui/layui.js}" ></script>
<script>

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        $.ajax({
            url:'/api/college/getParent',
            type: 'get',
            data:{},
            success: function (data){
                var html = "<option value=''>请选择学院</option>";
                /* var p = document.getElementById("province");*/
                $.each(data ,function (index,item){
                    html += "<option value='"+item.id+"'>"+item.name+"</option>";
                });
                $("select[name='college']").html(html);
                form.render();
            },
            error: function (){

            }
        });
        form.on('select(college)',function(data){
           /* alert(data)
            alert(data.value)*/
            var parent = data.value;
            if(parent > 0){
                $.ajax({
                    url:'/api/college/getByParent',
                    type:'get',
                    data:{id:parent},
                    dataType:'json',
                    success:function(data){
                        console.log(data)
                        var html = "<option value=''>请选择专业</option>";
                        $.each(data,function(index,item){
                            html += "<option value='"+item.id+"'>"+item.name+"</option>"
                        });
                        $("select[name='major']").html(html);
                        form.render();
                    },
                    error:function(){

                    }
                });
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            $.ajax({
                url: '/api/recovery/add',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    if (data == 1) {
                        alert("提交成功，等待审核")
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {

                }
            });
            return false;

        });

    });
</script>
</body>
</html>